<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>项目</title>
	</head>
	<body>
		<!-- 登录区 -->
		<div class="content">
			<div class="top">
				<h1>项目</h1>
			</div>
			<div class="card">
				<h1>移动端网上购物商城</h1>
				<div class="card-item">
					<div class="card-image">
						<img src="./img/img4.jpg" alt="" style="width:300px;height:300px">
					</div>
					<div class="card-text">
						<div>项目描述：网上购物商城是一个全品类的网购app平台，具有搜索、浏览、购买、在线支付、商品评价、商品详情、登录、收藏等功能</div>
						<div>
							<a href="text.html">
								<button>查看项目</button>
							</a></div>
					</div>

				</div>
			</div>
			<!--  -->
			<div class="card">
				<h1>尚品汇</h1>
				<div class="card-item">
					<div class="card-image">
						<img src="./img/img5.jpg" alt="" style="width:300px;height:300px">
					</div>
					<div class="card-text">
						<div>项目描述：尚品汇是一家专注电子产品销售的线上商城，包括商城首页、商品列表页、商品详情页、购物车页面、订单列表页</div>
						<div>
							<a href="sph.html">
								<button>查看项目</button>
							</a>
						</div>
					</div>
				</div>
			</div>
			<!--  -->
			<div class="card">
				<h1>pc端优购商城</h1>
				<div class="card-item">
					<div class="card-image">
						<img src="./img/img3.jpg" alt="" style="width:300px;height:300px">
					</div>
					<div class="card-text">
						<div>项目描述：优购商城是一个网购类的PC端静态页面平台，具有首页，购物车，商品详情，登录和注册页面 </div>
						<div>
							<a href="pc.html">
								<button>查看项目</button>
							</a>
						</div>
					</div>

				</div>
			</div>
			<!--  -->
			<div class="card">
				<h1>思政网</h1>
				<div class="card-item">
					<div class="card-image">
						<img src="./img/img2.jpg" alt="" style="width:300px;height:300px">
					</div>
					<div class="card-text">
						<div>项目描述：使用BootStrap组件快速搭建页面和media媒体查询实现页面的响应式效果</div>
						<div class="button">
							<a href="szw/szw.html">
								<button>查看项目</button>
							</a>
						</div>
					</div>
				</div>
			</div>
			<!--  -->

		</div>
	</body>
</html>
<style type="text/css">
	body {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		/* 渐变背景 */
		background: linear-gradient(200deg, #72afd3, #96fbc4);
		padding-bottom:50px;
	}

	.top {
		text-align: center;
		font-size: 20px;
		padding-top: 15px;
	}

	.card {
		background-color: #fff;
		width: 800px;
		height: 400px;
		margin: 0px auto;
		border-radius: 10px
	}

	.card-item {
		display: flex;
	}

	.card h1 {
		text-align: center;
		padding-top: 20px;
	}

	.card-text {
		width: 400px;
		height: 200px;
		margin-left: 50px;
		font-size: 25px;
	}

	button {
		font-size: 30px;
		margin: 80px 120px;
	}
</style>
